<template>
<!--remao_shop/packageC/loans/loans.wxml-->
<!-- 自定义表单 -->
<view class="form" v-if="iskan != 1 && ismiaosha != 1">
  <!-- <view class='title'>实名认证</view> -->
  <view v-for="(item, index) in formList" :key="index" class="content">
    <view v-if="item.type == 'text'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <input :data-index="index" @input="nameinputFun" :value="item.default" :placeholder="item.placeholder"></input>
    </view>
    <view v-if="item.type == 'radio'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <radio-group class="radio-group" @change="radioChange" :data-index="index">
        <label v-for="(item, ind) in item.radio_name" :key="ind" class="radio">
          <radio :value="ind" checked></radio>{{item}}
        </label>
      </radio-group>
      <!-- <radio-group class="radio-group" bindchange="radioChange">
            <label class="radio" wx:for="{{danxuan}}" wx:for-index="index">
            {{item}}
            {{index}}
               <view wx:for="{{item}}" wx:for-index="ind">
                  <radio value="{{ind}}" checked="" />{{item}}
               </view>
            </label>
         </radio-group> -->
    </view>
    <view v-if="item.type == 'checkbox'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <checkbox-group :value="result" @change="onChangefu" :data-index="index">
        <checkbox v-for="(item, index2) in item.radio_name" :key="index2" checked-color="#09bb07" :name="item">
          {{ item }}
        </checkbox>
      </checkbox-group>
    </view>
    <view v-if="item.type == 'textarea'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <textarea @input="textinput" maxlength="-1" :data-index="index" class="textarea" :placeholder="item.placeholder" @blur="bindTextAreaBlur" :value="item.default" auto-focus="true" auto-height></textarea>
    </view>
    <view v-if="item.type == 'time'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <view class="section">
        <picker mode="time" :value="time" :data-index="index" @change="bindTimeChange">
          <view class="picker">
            {{time}}
          </view>
        </picker>
      </view>
    </view>
    <view v-if="item.type == 'date'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <view class="section">
        <picker mode="date" :value="date" :data-index="index" @change="bindDateChange">
          <view class="picker">
            {{date}}
          </view>
        </picker>
      </view>
    </view>
    <view v-if="item.type == 'file'">
      <text v-if="item.require == 1">*</text>
      <view class="name">{{item.name}}:</view>
      <view class="imgupload" @tap="imguploadFun" :data-index="index">
        <image v-if="item.default == ''" src="/static/remao_shop/img/update.png" class="img"></image>
        <image v-if="item.default != ''" mode="aspectFit" :src="item.default"></image>
      </view>
    </view>
  </view>
  <button class="tijiao" @tap="tijiao">提交</button>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      userId: '',
      formList: [],
      nameinput: '',
      //单选框
      danxuan: [],
      //复选框
      result: [],
      //多行文本框
      textarea: '',
      //时间选择
      time: '12:00',
      //日期选择
      date: '2019-1-1',
      //图片
      imgupload: '',
      form: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.userId = wx.getStorageSync("userId");
    console.log(this.userId);
    this.formFun();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    //自定义表单
    formFun: function () {
      app.globalData.request({
        url: api.default.select_form,
        data: {// uniacid: 13
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            formList: res.data
          });
          var that = this;

          for (let i = 0; i < that.formList.length; i++) {
            if (that.formList[i].type == 'time') {
              that.formList[i].default = that.time;
            }

            if (that.formList[i].type == 'date') {
              that.formList[i].default = that.date;
            }
          }

          console.log(this.formList);
        }
      });
    },

    //input
    nameinputFun(e) {
      console.log(e);
      console.log(e.detail.value);
      var idx = e.currentTarget.dataset.index;
      var list = this.formList; // 

      var list2 = list[idx];
      list2.default = e.detail.value;
      console.log(list);
      this.setData({
        formList: list
      });
    },

    //textarea多行文本框
    textinput(e) {
      console.log(e);
      console.log(e.detail.value);
      var idx = e.currentTarget.dataset.index;
      var list = this.formList; // 

      var list2 = list[idx];
      list2.default = e.detail.value;
      console.log(list);
      this.setData({
        textarea: list
      });
    },

    //单选框
    radioChange(event) {
      console.log(event.currentTarget.dataset.index);
      console.log(event.detail.value);
      var idx = event.currentTarget.dataset.index;
      var val = event.detail.value;
      var list = this.formList;
      var list2 = list[idx];
      list2.default = list2.radio_name[event.detail.value];
      console.log(list2.radio_name[event.detail.value]);
      console.log(this.formList);
    },

    //复选框
    onChangefu(event) {
      var idx = event.currentTarget.dataset.index;
      this.setData({
        result: event.detail
      });
      var list = this.formList;
      var list2 = list[idx];
      list2.default = event.detail;
      console.log(this.result);
      console.log(this.formList);
    },

    //时间选择
    bindTimeChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      console.log(e);
      this.setData({
        time: e.detail.value
      });
      console.log(e.detail.value);
      var idx = e.currentTarget.dataset.index;
      var list = this.formList;
      var list2 = list[idx];
      list2.default = e.detail.value;
      console.log(list);
    },
    //日期选择
    bindDateChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      console.log(e);
      this.setData({
        date: e.detail.value
      });
      console.log(e.detail.value);
      var idx = e.currentTarget.dataset.index;
      var list = this.formList;
      var list2 = list[idx];
      list2.default = e.detail.value;
      console.log(list);
    },

    //图片
    imguploadFun(e) {
      console.log(e);
      var idx = e.currentTarget.dataset.index;
      var that = this;
      var list = that.formList;
      var list2 = list[idx];
      console.log(list);
      console.log(list2);
      wx.chooseImage({
        count: 1,

        success(res) {
          // console.log(res)
          // console.log(res)
          const tempFilePaths = res.tempFilePaths;
          that.Logo = tempFilePaths[0];
          console.log(tempFilePaths[0]);
          wx.uploadFile({
            url: api.default.wq_uplode_img,
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              "Content-Type": "multipart/form-data"
            },
            success: function (res) {
              console.log(res);
              console.log(res.data); // var src = that.data.formList[idx].src = 

              list2.default = res.data;
              that.setData({
                formList: list
              });
            }
          });
        }

      });
    },

    //提交表单
    tijiao: function () {
      var that = this;
      var aa = 0;
      console.log(this.formList);
      console.log(that.userId);

      for (let i = 1; i < this.formList.length; i++) {
        if (this.formList[i].default == "" && this.formList[i].require == 1) {
          console.log('数');
          aa = i;
        }
      }

      console.log(this.formList);
      console.log(aa);

      if (aa != 0) {
        wx.showToast({
          title: '请输入必填项',
          icon: 'none',
          duration: 2000
        });
      } else {
        let form = JSON.stringify(that.formList);
        app.globalData.request({
          url: 'https://testwq.shiliucrm.com/addons/remao_shop/api/index.php?r=order/form_post',
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值

          },
          data: {
            u_id: that.userId,
            // u_id: 10059,
            form: form
          },
          method: 'POST',
          success: res => {
            console.log(res);

            if (res.status == 1) {
              wx.showToast({
                title: res.msg
              });
              wx.navigateBack({
                delta: 1
              });
            } else {
              wx.showToast({
                title: res.msg,
                icon: "success"
              });
            }
          }
        });
      }
    }
  }
};
</script>
<style>
@import "./loans.css";
</style>